<template>
	<div id="moring">
		<div class="moring-O">
			<div class="moringTop">
				<ul>
					<li v-on:click="lchenge($router)"><img src="/static/images/icon-return.png"></li>
					<li><p>领早餐</p></li>
					<li class="lili">&#xe604;</li>
				</ul>
			</div>
		</div>
		<div class="moring-T">
			<img src="http://cdn.oudianyun.com/lyf/prod/ad-whale/1501489699294_539_LzaCS2Svrd.jpg">
		</div>
		<div class="moring-M">
			<div class="moring-Bo">
				<img src="/static/images/220942676368794289_03.gif">
				<!-- <div class="moring-D"> -->
					<ul>
						<li>美味早餐免费领</li>
						<li>等你来秒杀！</li>
						<li><span>00</span>:<span>00</span>:<span>00</span></li>
					</ul>
				</div>
		</div>
	

		<div class="moring-J">
			<div class="moring-K">
				<span>
					<i class="ling">&#xe66c;</i>惊喜商品
				</span>
			</div>
			<div class="moring-L">
				<dl>
					<dt><img src="/static/images/1499823649431_35.052124983636936_c47f1451-c030-4ccb-a095-e12e4d342da0.jpg"></dt>
					<dd>鸭脯</dd>
					<dd><a>￥25.70</a></dd>
				</dl>
				<dl>
					<dt><img src="/static/images/1495683696054_12.178243979545245_b4303305-f7dc-43fc-95d5-9e5bb3310d42.jpg"></dt>
					<dd>芒果干</dd>
					<dd><a>￥16.80</a></dd>
				</dl>
				<dl>
					<dt><img src="/static/images/1493195128000_36.41535509397955_eec892f5-7c98-4233-8445-d687fc67c320.jpg"></dt>
					<dd>安佳牛奶</dd>
					<dd><a>￥68.00</a></dd>
				</dl>
			</div>
		</div>
		<div class="moring-B">
			<ul>
				<li><img src="/static/images/1502710475149_5906_96.jpg"></li>
				<li><img src="/static/images/1502710504442_7085_92.jpg"></li>
			</ul>
		</div>
		<div class="moring-Q">
			<div class="moring-A">
				<span>
					<i class="ling">&#xe619;</i>爱我所爱 想买就买
				</span>
			</div>
			<div class="moring-X">
				<dl v-for="l in ling">
					<dt><img :src="l.imageUrl"></dt>
					<dd>{{l.name}}</dd>
					<dd><a>￥{{l.refObject.availablePrice}}</a></dd>
				</dl>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return{
				ling:[],

			}
		},
			methods:{
			lchenge(str){
				str.go(-1)
			},
			request(){
				this.$http({
					url:"http://m.laiyifen.com/api/dolphin/list?platform=2&pageCode=H5_GET_BREAKFAST_PAGE&adCode=recommending_commodities&companyId=30&areaCode=110114",
					method:"get",
				}).then(function(res){
					console.log(res);
					this.ling = res.data.data.recommending_commodities
					console.log(res.data.data.recommending_commodities);
				})

			}
		},
		mounted(){
			this.request();
		}

	};

	
</script>
<style type="text/css" scoped>
	#moring,.moring-T{
		width:100%;	
	}
	.moring-O{
		width:100%;
		position: fixed;
		top:0;
		right:0;
		left:0;
		background:#fff;
		padding-bottom: .25rem;
		border-top:1px #c5c5c5 solid;
		z-index: 10;
	}
	.moring-T img{		
		width:100%;
	}
	.lili{
		 font-family: 'iconfont';
		 font-size: .5rem;
		 color:#ff6900;
	}
	@font-face {
		  font-family: 'iconfont';  
		  src: url('//at.alicdn.com/t/font_345259_ij5tyvv8jckgldi.eot');
		  src: url('//at.alicdn.com/t/font_345259_ij5tyvv8jckgldi.eot?#iefix') format('embedded-opentype'),
		  url('//at.alicdn.com/t/font_345259_ij5tyvv8jckgldi.woff') format('woff'),
		  url('//at.alicdn.com/t/font_345259_ij5tyvv8jckgldi.ttf') format('truetype'),
		  url('//at.alicdn.com/t/font_345259_ij5tyvv8jckgldi.svg#iconfont') format('svg');
		}
	.moringTop ul{
		display: flex;
		justify-content: space-between;
  		align-items: center;
	}
	.moringTop {
		width: 95%;
		margin:0 auto;
		margin-top: .33rem;
	}
	.moringTop li{		
			display: flex;
		align-items: center;
	}	
	.moringTop li>img{
		width:.56rem;
	}
	.moringTop li>p{
		font-size: .45rem;
	}
	.moring-T{
		margin-top: 1rem;
	}
	.moring-M{
		width:100%;
		background:#f5f5f5;
		padding:0.1px;
	/*	border-top:7px #f5f5f5 solid;*/
	margin-top: -.05rem;
	}
	.moring-M .moring-Bo{
		width:95%;
		margin:0 auto;
		background:#ff6900;
		border-top-right-radius: 5rem;
		border-top-left-radius: 5rem;
		border-bottom-right-radius: 5rem;
		border-bottom-left-radius: 5rem;
		display: flex;
		justify-content: center;
		text-align: center;
		margin-top: .35rem;
		margin-bottom: .35rem;
	}
	.moring-M .moring-Bo ul li{
		font-size: .4rem;
		color:yellow;
	}
	.moring-M .moring-Bo ul{
		margin-top: .5rem

	}
	.moring-M .moring-Bo ul li>span{
		background:#555;
		padding:0rem .1rem;
		margin:0 .1rem;
	}
	.moring-M .moring-Bo ul li:last-of-type{
		margin-top: .3rem
	}
	.ling{
		 font-family: 'iconfont';
		 font-size: .578rem;
		 color:orange;
	}
	@font-face {
	  font-family: 'iconfont';  /* project id 345259 */
	  src: url('//at.alicdn.com/t/font_345259_jgta0j1f4p5019k9.eot');
	  src: url('//at.alicdn.com/t/font_345259_jgta0j1f4p5019k9.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_345259_jgta0j1f4p5019k9.woff') format('woff'),
	  url('//at.alicdn.com/t/font_345259_jgta0j1f4p5019k9.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_345259_jgta0j1f4p5019k9.svg#iconfont') format('svg');
	}
	.moring-J{
		width:100%;
		border-bottom:.4rem #e5e5e5 solid;
		padding-bottom: .35rem;
	}
	.moring-K{
		width:95%;
		margin:.5rem auto;
		height:.03rem;
		background:#9e9c9b;
		position: relative;
	}
	.moring-K span{
		position: absolute;
		background:#fff;
		width: 29%;
		right:3.4rem;
		top:-.4rem;
		text-align: center;
	}
	.moring-K span i{

		margin-right: .1rem
	}
	.moring-L{
		width:100%;
		display: flex;
		justify-content: space-around;
		margin-top: .7rem;
	}
	.moring-L dl{
		width:30%;
	}
	.moring-L dl a{
		color:#ff7900;
		font-size: .38rem;
	}
	.moring-L dl dd{
		margin-top: .1rem;
		margin-left: .25rem;
	}
	.moring-B{
		width: 100%;
		background:#e5e5e5;
		border-bottom: .7rem #e5e5e5 solid;
	}
	.moring-B ul{
		width: 100%;
		display:flex;
		justify-content: space-around;
	}
	.moring-B ul li{
		padding:0 .1rem;
	}
	.moring-B ul li img{
		width:99%;
	}
	@font-face {
	  font-family: 'iconfont';  /* project id 345259 */
	  src: url('//at.alicdn.com/t/font_345259_4hwrr488kxirudi.eot');
	  src: url('//at.alicdn.com/t/font_345259_4hwrr488kxirudi.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_345259_4hwrr488kxirudi.woff') format('woff'),
	  url('//at.alicdn.com/t/font_345259_4hwrr488kxirudi.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_345259_4hwrr488kxirudi.svg#iconfont') format('svg');
	}
	.moring-Q{
		width:100%;
		background:#e5e5e5;
		margin-top: -.5rem;
	}
	.moring-A{
		width:95%;
		margin:.5rem auto;
		height:.03rem;
		background:#9e9c9b;
		position: relative;
	}
	.moring-A span{
		position: absolute;
		background:#fff;
		width: 44%;
		right:2.7rem;
		top:-.4rem;
		text-align: center;
		font-size: .4rem;
		background: #e5e5e5;
	}
	.moring-A span i{
		margin-right: .1rem;
	}
	.moring-X{
		width:100%;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}	
	.moring-X dl{
		width:48%;
		background: #fff;
		margin-top: .3rem;
	}
	.moring-X dl img{
		width: 100%
	}

	.moring-X dl dd{
		margin-left: .25rem
	}
	.moring-X dl a{
		color:#ff7900;
		font-size: .4rem;
	}
	.moring-X dl dd{
		margin-top: .15rem;
	}

</style>